<template>
    <div class="guan">
         <div class="head">
            <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
             我的关注
        </div>
       <p v-if="card.length==0"> <van-empty description="暂无关注" /></p>
          <ul>
              <li v-for='(item,index) in card' :key="index">
                  <p class="imgs"><img :src="item.avatar" alt=""></p>
                  <div class="z">
                      <p>{{item.teacher_name}}</p>
                      <p>{{item.introduction}}</p>
                  </div>
                  <van-button size="small" @click="xiao(item.teacher_id)">取消关注</van-button>
              </li>
          </ul>
    </div>
</template>
<script>
import {guanye,collect} from '../../Request/http'
export default {
    name: 'EverydayConcern',
    data() {
        return {
            card:[]
        };
    },
    mounted() {
        guanye({page:1,limit:10,type:2}).then((res)=>{
            console.log(res)
            this.card=res.list
            console.log(this.card)
        })
    },
    methods: {
        xiao(id){
            console.log(id)
            collect(id).then((res)=>{
                console.log(res)
                guanye({page:1,limit:10,type:2}).then((res)=>{
            console.log(res)
            this.card=res.list
            console.log(this.card)
        })
            })
   
        }
    },
};
</script>

<style lang="scss" scoped>
.head{
        width: 100%;
        line-height: 50px;
        text-align: center;
        position: relative;
        background:#ffff;
        font-size:18px;
        .icon-fanhui{
            position: absolute;
            top:0;
            left: 20px;
        }
        span{
            position: absolute;
            top: 0px;
            right: 20px;
        }
 }
.guan{
    width: 100%;
    height: 100%;
    background:rgb(245, 244, 244);
    ul{
        padding:20px;
        box-sizing:border-box;
        width: 100%;

        li{
            display: flex;
            margin-bottom:20px;
            border-radius: 10px;
            background:#ffff;
            padding: 10px 20px;
            .imgs{
                width: 15%;
                height: 1rem;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius:50%;
                }
            }
            .z{
              flex:1;
              padding:15px;
              line-height:20px;
            }
            .van-button{
                margin-top:40px; 
                background: pink;
                border-radius: 10px;
            }
        }
        
    }
}
</style>